<!DOCTYPE html>
<%    
	String path = request.getContextPath();    
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
	pageContext.setAttribute("basePath",basePath);    
%>    
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="${basePath}/resources/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var cvs = $("#mycanvas")[0];
				var cxt = cvs.getContext("2d");
				cvs.addEventListener('mousemove', function(e) {
					getZB(cvs, e.clientX, e.clientY,cxt);
				});
			})
			
			function getZB(c, x, y,cxt) {

				var bbox = c.getBoundingClientRect();
				var left = bbox.left;
				var top = bbox.top;
				$("#tip").empty();
				var theX = x - left * (c.width / bbox.width);
				var theY = y - top * (c.height / bbox.height);
				$("#tip").text("left:" + theX + " top:" + theY + " canvas.width:" + c.width + " bbox.width" + bbox.width);
				cxt.clearRect(0,0,400,400);
				cxt.beginPath();
				cxt.moveTo(theX, 0);
				cxt.lineTo(theX, c.height);
				cxt.stroke();
				cxt.beginPath();
				cxt.moveTo(0, theY);
				cxt.lineTo(c.width, theY);
				cxt.stroke();
			}
		</script>
	</head>
	<body>
		<h1 id="tip"></h1>
		<canvas id="mycanvas" width="400" height="400" style="border:1px solid #c3c3c3;" >
			还在用土鳖ie?赶紧换吧，分分钟炫起来！
		</canvas>

	</body>
</html>
